---
name: useClickAway
route: /useClickAway
menu: 'Other'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useClickAway

A hook that elegantly manages click outside of target elements.

## Examples

### Default usage

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Default usage' description='Please click button or outside of button to show effects.'>
  <Demo1 />
</JackBox>

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Custom DOM' description='Support pass in a DOM element directly or a function that returns the DOM element.'>
  <Demo2 />
</JackBox>

## API

```javascript
const ref = useClickAway(
  onClickAway: (event: KeyboardEvent) => void,
  dom?: RefType,
);
```

### Result

| Property | Description                                         | Type                 |
|----------|------------------------------------------|------------|
| ref     | when no param is passed, this ref will be listened     | -        |

### Params

| Property | Description                                 | Type                   | Default |
|---------|----------------------------------------------|------------------------|--------|
| onClickAway | Trigger Function  | (event) => void | -      |
| dom | optional, if none is passed, this hook will subscibe to the dom that it returns  | HTMLElement \| (() => HTMLElement) \| undefined | -      |